<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3033678_tl6ywddpnjb.css">
    <script src="../js/vue.js"></script>
    <style>
        a{
            color: inherit;
            text-decoration: none;
            display: block;
        }

        .article{
            width: 200px;
            min-height:400px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .article > div{
            border: 1px solid #333;
        }

        .article .article-header{
            text-align: center;
            font-size: 20px;
            line-height: 40px;
            font-weight: bold;
        }

        .article .article-main{
            flex: 1;
            text-indent: 2em;
            font-size: 14px;
        }

        .article .article-footer{
            text-align: right;
            line-height: 20px;
            font-size: 13px;
        }

    </style>
</head>
<body>
    <div id="app">
        <!-- <button @click="count++">count++</button> -->

        <lw-article>
            <template #header>
                Are you Ok!
            </template>

            <!-- v-slot:default -->
            <template #default>
                ok 还是不 ok, 这是一个问题!
            </template>

            <!-- 除了具名插槽以外的所有内容 默认都分发默认插槽中 -->
            1111
            2222


            <template #footer>
                作者:老王
            </template>


            33333
        </lw-article>
       
    </div>
    
</body>
<script>
    // 插槽
    // Vue 实现了一套内容分发的 API, 将 <slot> 元素作为承载分发内容的出口。

    // slot => 官方内置组件,在组件封装过程中使用, 用于接收父组件给子组件标签对中传入的内容(插槽内容)

    // 本质上: slot内置组件,属于占位符,在子组件解析过程中,slot会被替换为父组件传入的插槽内容

    // 后备内容: 可以在slot组价内 设置文本或html结构作为后备内容,当父组件给子组件传入的插槽内容为空时,默认使用后备内容

    // 具名插槽
    // 如果组件封装过程中,需要父组件分发多个内容, 就是设置多个slot内置组件设置name属性(插槽名), 父组件分发内容时使用v-slot指令对应参数名分发内容(v-slot:参数名 => 对应slot标签中的name属性(插槽名),如果不设置默认都是default)

    // 注意:
    // v-slot: 可以简写为 #

    let NavLink = {
        props:['url',"blank"],
        data(){
            return {}
        },
        template:`<a :href="url" :target="blank?'_blank':'_self'">
                <slot>超链接</slot>
            </a>`,
        mounted() {
            console.log("当前实例",this);
        },
    }

    let LwArticle = {
        data(){
            return {}
        },
        template:`<div class="article">
            <div class="article-header">
                <slot name="header"></slot>
            </div>
            <div class="article-main">
                <slot name="default"></slot>
            </div>
            <div class="article-footer">
                <slot name="footer"></slot>
            </div>
        </div>`,
        mounted() {
            console.log("当前实例",this);
        },
    }

    var vm = new Vue({
        el:"#app",
        data:{
           count:1,
        },
        components:{
            NavLink,
            LwArticle
        }
    })

</script>
</html>